<template>
    <div v-if="visible" class="dialog-container">
        <div class="dialog-box">
            <div class="dialog-header flex flex-jc-sb flex-ai-c">
                <div class="title fc-white fs-24">
                    充值中心
                </div>
                <div class="close fc-white fs-24">
                    <span class="icon pointer" @click="handleClose">
                        &times;
                    </span>
                </div>
            </div>
            <div class="dialog-body">
                <div v-if="!isSuccess" class="flex gap-16">
                    <div class="left fs-12">
                        <div class="bold mg-t-12 mg-b-22">发薪权限</div>
                        <div class="left-item flex flex-ai-c">
                            <el-icon class="fc-primary mg-r-5">
                                <Select />
                            </el-icon>
                            <span>5个起发薪席位</span>
                        </div>
                        <div class="left-item flex flex-ai-c">
                            <el-icon class="fc-primary mg-r-5">
                                <Select />
                            </el-icon>
                            <span>无限创建发薪项目数</span>
                        </div>
                        <div class="left-item flex flex-ai-c">
                            <el-icon class="fc-primary mg-r-5">
                                <Select />
                            </el-icon>
                            <span>无卡发薪</span>
                        </div>
                    </div>
                    <div class="center w-full">
                        <div v-if="orderInfo?.expireSeatsCount > 0" class="tip-box fs-12 mg-t-16 flex flex-ai-c">
                            <el-icon class="fc-orange mg-r-5">
                                <Warning />
                            </el-icon>
                            <span>检测到您</span>
                            <span class="fc-orange">有{{ orderInfo?.expireSeatsCount }}个多出席位到期后将被停用，建议您另外购买，</span>
                            <span>已防为您的工作带来不便。</span>
                        </div>

                        <div class="flex w-full gap-16 mg-t-30">
                            <div class="shadow-box box1" :class="{ 'selected': isClick }">
                                <div class="linear-box pointer" @click="isClick = !isClick">
                                    <div class="linear-inner-box">
                                        <div class="fs-12 bold">1年</div>
                                        <div class="fc-orange fs-20 mg-t-16 "><span class="fs-14">¥</span>6000<span
                                                class="fs-14">/年</span></div>
                                    </div>
                                    <div class="triangle-box">
                                        <el-icon class="fc-white fs-12 check-box"><Select /></el-icon>
                                        <div class="triange-white"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="shadow-box box2">
                                <div class="linear-box pointer">
                                    <div class="linear-inner-box">
                                        <div class="fs-12 bold mg-b-16 ">另购席位数</div>
                                        <div class="flex flex-jc-sb flex-ai-c">
                                            <div class="fc-orange fs-20"><span class="fs-14">¥</span>300<span
                                                    class="fs-14">/位</span></div>
                                            <el-input-number v-model="num" size="small" :min="0" @change="handleChange" />
                                        </div>
                                    </div>
                                </div>
                                <div class="screw-container">
                                    <div class="screw-box fs-12">
                                        <div class="screw-content flex flex-ai-c">
                                            <div class="set-pd">当前已有席位数{{ orderInfo.hasSeat }}（已用{{ orderInfo.useSeat }}）
                                            </div>
                                            <el-tooltip class="box-item" effect="dark" placement="right">
                                                <template #content>
                                                    <div class="set-tooltip-width">
                                                        产品包含5个发薪席位，超出部分的发薪席位需要另补差价，300元/位。到期未购买的席位，到期后将自动停用。
                                                    </div>
                                                </template>
                                                <el-icon class="fc-orange mg-l-10">
                                                    <Warning />
                                                </el-icon>
                                            </el-tooltip>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="flex-1 detail-box">
                                <div class="name bold mg-b-10">订单详情</div>
                                <div class="mg-b-10 fs-12">
                                    <span class="item-name">当前公司：</span>
                                    <span class="item-value">{{ orderInfo.companyName }}</span>
                                </div>
                                <div class="mg-b-10 fs-12">
                                    <span class="item-name">订单类型：</span>
                                    <span class="item-value">续费</span>
                                </div>
                                <div class="mg-b-10 fs-12">
                                    <span class="item-name">订购时长：</span>
                                    <span class="item-value">1年</span>
                                </div>
                                <div class="mg-b-10 fs-12">
                                    <span class="item-name">发薪席位：</span>
                                    <span class="item-value">套餐包含<span class="fc-primary mg-l-5 mg-r-5">5</span>个另购席位<span
                                            class="fc-primary mg-l-5 mg-r-5">{{ num }}</span>个</span>
                                </div>
                                <div class="fs-12">
                                    <span class="item-name">预计生效时间：</span>
                                    <span class="item-value">付款审核成功后，立即生效</span>
                                </div>
                            </div>
                        </div>

                        <div class="border-box">
                            <div class="tab-card flex">
                                <div class="tab-item flex-1 flex flex-ai-c flex-jc-c" :class="{ 'active': curTab === 1 }" @click="changeTab(1)">
                                    <img src="../../assets/recharge/icon-pay-account.png" alt="" class="img mg-r-5">
                                    公对公转账
                                </div>
                                <div class="tab-item flex-1 flex flex-ai-c flex-jc-c" :class="{ 'active': curTab === 2 }" @click="changeTab(2)">
                                    <img src="../../assets/recharge/icon-pay-wechat.png" alt="" class="img mg-r-5">
                                    微信扫码
                                </div>
                            </div>
                            <div v-show="curTab === 1" class="tab-1">
                                <div class="flex mg-t-16 gap-16">
                                    <div class="flex1">
                                        <uploadFile can-compress v-model:base64File="fileUrl" prop-name="fileUrl" :limit="1"
                                            :limit-size="10" remove-confirm @success="handleSuccess($event)"
                                            @remove="handleRemove($event)">
                                            <span class="tips">添加付款凭证</span>
                                        </uploadFile>
                                    </div>
                                    <div class="flex-1 fs-12">
                                        <div class="mg-b-12 flex">
                                            <span class="fc-grey name-item">企业全称：</span>
                                            <span>{{ bankInfo?.bankName }}</span>
                                        </div>
                                        <div class="mg-b-12 flex">
                                            <span class="fc-grey name-item">银行账号：</span>
                                            <span>{{ bankInfo?.bankNo }}</span>
                                        </div>
                                        <div class="mg-b-12 flex">
                                            <span class="fc-grey name-item">开户行：</span>
                                            <span>{{ bankInfo?.openBank }}</span>
                                        </div>
                                        <div class="mg-b-12 flex">
                                            <span class="fc-grey name-item">付款金额：</span>
                                            <span class="bold fc-orange">¥{{ totalMoney }}元</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div v-show="curTab === 2" class="tab-2">
                                <div class="flex flex-ai-c mg-t-12">
                                    <div class="flex1">
                                        <uploadFile can-compress :file-url="fileUrl" prop-name="fileUrl" :limit="1"
                                            :limit-size="10" remove-confirm @success="handleSuccess($event)"
                                            @remove="handleRemove($event)">
                                            <span class="tips">添加付款凭证</span>
                                        </uploadFile>
                                    </div>
                                    <div class="flex flex-ai-c mg-l-16">
                                        <img class="wx-img mg-r-12" :src="bankInfo.qyWxQrcode" alt="">
                                        <div class="fc-grey">付款金额：<span class="fc-orange">¥{{ totalMoney }}元</span></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="button-box flex mg-t-16">
                            <el-button class="half" :disabled="!canButtonClick" type="primary"
                                @click="submit">提交并充值</el-button>
                        </div>
                        <div class="mg-t-16 flex flex-ai-c">
                            <el-checkbox class="mg-r-5" v-model="checked">
                                我方已充分阅读并同意
                            </el-checkbox>
                            <a class="fc-primary pointer" @click="toService" >《服务协议》</a>
                            <a class="fc-primary" href="https://element-plus.org">《合同样例》</a>
                        </div>
                    </div>
                    <div class="right">
                        <img :src="avatar" alt="" class="icon-head">
                        <div class="bold text-center mg-t-12">{{ orderInfo.companyName }}</div>
                        <div class="bold fs-12 fc-grey text-center mg-t-12">团队账号到期时间：{{ orderInfo.accountExpireTime }}</div>
                        <div class="mg-t-30">
                            <div class="flex flex-ai-c mg-b-12 fs-12">
                                <img src="../../assets/recharge/icon-seat.png" alt="" class="icon-seat mg-r-5">
                                <div>当前共有席位数：{{ orderInfo.hasSeat }}</div>
                            </div>
                            <el-scrollbar class="set-height">
                                <div v-for="(i, index) in list" :key="index" class="flex fs-12 flex-jc-sb mg-b-12">
                                    <div class="flex">
                                        <div class="flex">{{ typeMap((i as any)?.salesScenario) }} ：<span
                                                class="fc-primary">{{ (i as any).salesScenario === 1 ? 5 : (i as
                                                    any).buySeatCount }}</span></div>
                                    </div>
                                    <div>{{ formatDate((i as any)?.dueDate) }}到期</div>
                                </div>
                            </el-scrollbar>
                        </div>
                        <div class="flex mg-t-30 flex-jc-c">
                            <el-button @click="toNext">开通记录</el-button>
                        </div>
                    </div>
                </div>

                <div v-if="isSuccess">
                    11111111
                </div>
            </div>
        </div>
    </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import uploadFile from '@/components/upload-file.vue';
import store from '@/store/index'
import { getCompanySeatInfo, addRechargeRecord } from '@/api/recharge-record';
import dayjs from 'dayjs';

export default defineComponent({
    props: {
        show: {
            type: Boolean,
            default: false
        },
        noNeedRouter: {
            type: Boolean,
            default: false
        }
    },
    components: {
        uploadFile
    },
    data() {
        return {
            visible: false,
            num: 0,
            curTab: 1,
            checked: false,
            isClick: false,
            fileUrl: '',
            list: [],
            orderInfo: {} as any,
            isSuccess: true
        }
    },
    watch: {
        show: {
            handler(newval) {
                this.visible = newval
            },
            immediate: true
        },
        visible(newval) {
            this.$emit('update:show', newval)
            if(!newval) {
                this.init()
            }
        }
    },
    computed: {
        totalMoney() {
            return this.isClick ? 6000 + 300 * (this.num ?? 0) : 300 * (this.num ?? 0)
        },
        canButtonClick() {
            return !!this.fileUrl && this.checked && (this.isClick || this.num)
        },
        avatar() {
            return store.state.avatar
        },
        bankInfo() {
            return (store.state.bankInfo || {}) as any
        },
        // willExpireSeatNumber() {
        //     let list = (this.orderInfo.seatList || []) as any
        //     const res = list.filter((i: any) => (dayjs(i.dueDate) < dayjs(expireDay)) && dayjs(i.dueDate) > dayjs(curDay))
        //     return res.length
        // },
        typeMap() {
            return (type: any) => {
                const map = {
                    1: '赠送席位',
                    2: '席位购买'
                }
                return (map as any)[type]
            }
        },
        formatDate() {
            return (date: any) => {
                return dayjs(date).format('YYYY-MM-DD')
            }
        },
    },
    mounted() {
        this.getData()
    },
    methods: {
        handleClose() {
            this.visible = false
        },
        handleChange() {
            console.log(11111)
        },
        changeTab(tab: number) {
            this.curTab = tab
        },
        getData() {
            getCompanySeatInfo({
                pageNum: 1,
                pageSize: 10
            }).then((res: any) => {
                this.orderInfo = res || {}
                this.list = res?.seatList.list || []
            })
        },
        handleSuccess(ev: string) {
            console.log(111, ev);
        },
        handleRemove(ev: string) {
            console.log(222, ev);
        },
        toNext() {
            if (!this.noNeedRouter) {
                this.$router.push({
                    path: '/recharge/record'
                })
            }
            this.visible = false
        },
        submit() {
            let remark = []
            let salesScenario = null
            if (this.isClick) {
                salesScenario = 1
                remark.push('发薪专户续费')
            }
            if (this.num) {
                salesScenario = 2
                remark.push(`另购席位${this.num}个`)
            }
            if(this.isClick && this.num) {
                salesScenario = 3
            }
            const query = {
                payMoney: this.totalMoney,
                rechargeAmount: 12,
                voucherUrl: this.fileUrl,
                receiptId: this.bankInfo.receiptId,
                buySeatCount: this.num || 0,
                remark: remark.join(' + '),
                salesScenario: salesScenario,
                payMode: this.curTab
            }
            addRechargeRecord(query).then((res: any) => {
                this.visible = false
                this.$emit('refresh')
            })
        },
        init() {
            this.num = 0
            this.isClick = false
            this.checked = false
        },
        toService() {
            this.$router.push({
                path: '/agreement/serviceAgreement'
            })
        }
    }
})
</script>
<style lang="stylus" scoped>
.dialog-container
    width 100%
    height 100%
    position fixed
    left 0
    top 0
    background rgba(0,0,0,0.5)
    z-index 100
.dialog-box
    width 1100px
    position absolute
    left 50%
    top 50%
    transform translate(-50%, -50%)
    background url('../../assets/recharge/image.png') no-repeat -120px -410px
    border-radius 15px
    overflow hidden
    background-size 130%
.title
    padding 25px 0 35px 16px
.close
    padding-right 50px
    font-size 36px
.dialog-header
    background rgba(0,0,0,0.7)
.dialog-body
    background #fff
    border-radius 15px
    padding 20px 16px
    margin-top -10px
.left
    width 160px
    flex-shrink 0
    background linear-gradient(180deg, #FEF7F7 -7%, #F8F9FD 19%, #FAFBFE 66%, #FFFFFF 86%, #FFFFFF 100%)
    padding 16px
    border-radius 8px
.left-item
    line-height 32px
.mg-b-22
    margin-bottom 22px
.year-box
    background #FEF9F5
    border 3px solid #DCBB98
    border-radius 8px
    height 114px
.detail-box
    padding 0 0 16px 0 
    border-radius 8px
.tip-box
    box-shadow 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
    padding 8px
.border-box
    border 1px solid #DBE1E5
    padding 18px 20px
    border-radius 12px
.tab-card
    background: #F3F3F5;
    border-radius 8px
    padding 4px
.tab-item
    border-radius 4px
    padding 8px 0px
    text-align center
    cursor pointer
    &.active
        background #fff
        box-shadow 0px 4px 10px 0px rgba(0, 0, 0, 0.1)
.half
    flex-basis 50%
.name-item
    width 5em
    text-align right
.wx-img
    width  auto
    height 98px
    border-radius 8px
    background #fff

.box1
    width 130px
    height 126px
    box-sizing border-box
.box2
    width 265px
    height 126px
    box-sizing border-box
.shadow-box
    padding 10px
    height 147px
    border-radius 12px
    position relative
    background linear-gradient(180deg, #FEF7F7 0%, #F8F9FD 27%, #FAFBFE 64%, #FAFAFA 87%, rgba(245,243,243,0.29) 100%)
    transition: all 0.2s ease
.linear-box
    border-radius 8px
    background #fff
    box-sizing border-box
    padding 2px
    box-shadow 0px 3px 8px 0px rgba(0, 0, 0, 0.1)
    height 100%
    position relative
    transition: all 0.2s ease
    &:hover
        background linear-gradient(138deg, #FCA2F6 1%, #187EF9 98%, #1E7FF9 98%)
        box-shadow none
    &:hover .triangle-box
        background: linear-gradient(131deg, #FFA2F6 -6%, #A895F7 42%, #187EF9 100%)
    &:hover .triange-white
        left -1px
        bottom -1px
        border-bottom 28px solid #fff;
        border-right 28px solid transparent
.triangle-box
    position absolute
    top 0
    right 0
    width 28px
    height 28px
    background #D8D8D8
    border-radius 0 8px 0 0
.selected
    padding 0
    .linear-box
        background linear-gradient(138deg, #FCA2F6 1%, #187EF9 98%, #1E7FF9 98%)
        box-shadow none
    .triangle-box
        background: linear-gradient(131deg, #FFA2F6 -6%, #A895F7 42%, #187EF9 100%)
    .triange-white
        left -1px
        bottom -1px
        border-bottom 28px solid #fff;
        border-right 28px solid transparent
.triange-white
    position absolute
    left -1px
    bottom -1px
    width 0
    height 0
    border-bottom 30px solid #fff;
    border-right 30px solid transparent
.linear-inner-box
    width 100%
    height 100%
    border-radius 7px
    background #fff
    padding-left 14px
    padding-right 14px
    padding-top 35px
    box-sizing border-box
.check-box
    margin-left 13px
    margin-top 4px
.screw-container
    position absolute
    left 18px
    top -10px
.screw-box
    background #FFEAE4
    padding 6px 14px
    transform skew(-30deg, 0)
    border-radius 0 8px 8px 0
    position relative
    &::before
        position absolute
        content: ''
        left -8px
        top 0
        background #FFEAE4
        width 20px
        height 100%
        transform: skewX(30deg);
        border-radius: 8px 0 0 0;
.screw-content
    transform skew(30deg, 0)
    background #FFEAE4
.set-tooltip-width
    width 220px
.icon
    vertical-align super

:deep(.el-upload--picture-card) {
    height 100px
    overflow hidden
}
.right
    width 220px
    flex-shrink 0
    background linear-gradient(180deg, #FEF7F7 -7%, #F8F9FD 19%, #FAFBFE 66%, #FFFFFF 86%, #FFFFFF 100%)
    padding 16px
    border-radius 8px
.icon-head
    display block
    width 86px
    height 86px
    border-radius 43px
    background #ffc
    margin 0 auto
.set-height
    height 200px
</style>